<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>
  
  <script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import resize from "./mixins/resize";

const animationDuration = 6000;

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: "chart"
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "250px"
    }
  },
  data() {
    return {
      chart: null
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    initChart() {
      var img =
        "";

      var trafficWay = [
        { value: 335, name: "长安区" },
        { value: 310, name: "桥西区" },
        { value: 234, name: "新华区" },
        { value: 135, name: "裕华区" },
        { value: 200, name: "高新区" },
        { value: 400, name: "‌井陉矿区" },
        { value: 280, name: "藁城区" },
        { value: 135, name: "鹿泉区" },
        { value: 158, name: "栾城区" }
      ];

      var data = [];
      var color = [
        "#00ffff",
        "#409B5C",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000"
      ];

      for (var i = 0; i < trafficWay.length; i++) {
        data.push(
          {
            value: trafficWay[i].value,
            name: trafficWay[i].name,
            itemStyle: {
              normal: {
                borderWidth: 5,
                shadowBlur: 20,
                borderColor: color[i],
                shadowColor: color[i]
              }
            }
          },
          {
            value: 2,
            name: "",
            itemStyle: {
              normal: {
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                color: "rgba(0, 0, 0, 0)",
                borderColor: "rgba(0, 0, 0, 0)",
                borderWidth: 0
              }
            }
          }
        );
      }

      var seriesOption = [
        {
          name: "",
          type: "pie",
          clockWise: false,
          radius: [105, 109],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: "outside",
                color: "#ddd",
                formatter: function(params) {
                  return params.name;
                }
              },
              labelLine: {
                length: 20,
                length2: 30,
                show: true,
                color: "#00ffff"
              }
            }
          },
          data: data
        }
      ];
      this.chart = echarts.init(this.$el, "macarons");

      this.chart.setOption({
        title: {
          text: "消纳场所",
          top: "48%",
          textAlign: "center",
          left: "49%",
          textStyle: {
            color: "#fff",
            fontSize: 22,
            fontWeight: "400"
          }
        },
        color: color,
        graphic: {
          elements: [
            {
              type: "image",
              z: 3,
              style: {
                image: img,
                width: 178,
                height: 178
              },
              left: "center",
              top: "center",
              position: [100, 100]
            }
          ]
        },
        tooltip: {
          show: true,
          formatter: function(params) {
            var percent = 0;
            var total = 0;
            for (var i = 0; i < trafficWay.length; i++) {
              total += trafficWay[i].value;
            }
            percent = ((params.value / total) * 100).toFixed(0);
            if (params.name !== "") {
              return params.name + "\n" + "\n" + "百分比：" + percent + "%";
            } else {
              return "";
            }
          }
        },
        toolbox: {
          show: false
        },
        series: seriesOption
      });
    }
  }
};
</script>
  